<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.lineicons.com/4.0/lineicons.css"/>
    <link href="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-confirm@3.3.4/dist/jquery-confirm.min.css">
    <link href="/assets/bootstrap/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">
    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar d-flex flex-column flex-md-row">
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" href="/admin/site/add"><i class="mdi mdi-plus"></i> 新增</a>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" id="search-keyword" name="search-keyword" placeholder="请输入网址标题...">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-default btn-search" type="submit">搜索</button>
                    </div>

                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Logo</th>
                                <th>名称简介</th>
                                <th>链接</th>
                                <th>分类</th>
                                <th>创建日期</th>
                                <th>更新日期</th>
                                <th style="text-align: center; ">状态</th>
                                <th style="text-align: center; ">操作</th>
                            </tr>
                            </thead>
                            <tbody class="tbody">

                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination">
                        <ul class="pagination" id="paginationDiv">

                        </ul>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-maxlength/1.9.0/bootstrap-maxlength.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-confirm@3.3.4/dist/jquery-confirm.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.17/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.js"></script>

<script type="text/javascript" src="/assets/bootstrap/js/httpclient/httpclient.js"></script>
<script type="text/javascript" src="/assets/bootstrap/js/jquery.pagination.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 加载列表页数据
        getPageListData();

        function getPageListData(page = 0, page_size = 0, search = null, url = "/api/site") {

            if (parseInt(page) < 1) {
                page = 1;
            }

            if (parseInt(page_size) < 1) {
                page_size = 10;
            }

            AjaxForm(
                "GET",
                url,
                {page: page, page_size: page_size, search: search},
                function () {
                },
                function (data) {
                    if (data.list.length > 0) {
                        var totalNum = data.pagination.total; //总条数
                        var pageNum = Math.ceil(totalNum / data.pagination.per_page_count); //分页的总页数

                        $("#paginationDiv").pagination({
                            current: data.pagination.current_page,
                            pageCount: pageNum,
                            coping: true,
                            homePage: '首页',
                            endPage: '末页',
                            mode: 'fixed',
                            prevContent: '上一页',
                            nextContent: '下一页',
                            activeCls: 'pageActive',
                            prevCls: 'pagePrev',
                            nextCls: 'pageNext',
                            callback: function (api) {
                                $(".tbody").html("");
                                getPageListData(api.getCurrent(), 10, $("#search-keyword").val());
                            }
                        });
                        $(".tbody").html("");
                        $.each(data.list, function (index, value) {
                            var showUsedBadge = "";
                            var optionUsedName = "";

                            if (value.is_used === 1) {
                                optionUsedName = '禁用';
                                showUsedBadge = '<span class="badge badge-success">启用</span></td>'
                            }

                            if (value.is_used === -1) {
                                optionUsedName = '启用';
                                showUsedBadge = '<span class="badge badge-danger">禁用</span></td>'
                            }

                            const tr = '<tr>\n' +
                                '<td>' + value.id + '</td>\n' +
                                '<td><img class="lozad img-circle" width="30" src="' + value.thumb + '" data-loaded="true"></td>\n' +
                                '<td>' + value.title + '</td>\n' +
                                '<td><a href="' + value.url + '" target="_blank">' + value.url + '</a></td>\n' +
                                '<td>' + value.category + '</td>\n' +
                                '<td>' + value.created_at + '</td>\n' +
                                '<td>' + value.updated_at + '</td>\n' +
                                '<td style="text-align: center; ">' + showUsedBadge + '</td>\n' +
                                '<td style="text-align: center; ">\n' +
                                '<div class="btn-group">\n' +
                                '    <a class="btn btn-xs btn-default btn-detail" href="#!" title=""\n' +
                                '                                           data-title="' + value.title + '"' +
                                '                                           data-description="' + value.description + '"' +
                                '                                           data-toggle="tooltip" data-original-title="详情">详情</a>\n' +
                                '    <a class="btn btn-xs btn-default btn-option" href="#!" title=""\n' +
                                '                                           data-id="' + value.id + '"' +
                                '                                           data-is-used="' + value.is_used + '"' +
                                '                                           data-toggle="tooltip" data-original-title="' + optionUsedName + '">' + optionUsedName + '</a>\n' +
                                '    <a class="btn btn-xs btn-default btn-confirm" href="#!" title=""\n' +
                                '                                           data-id="' + value.id + '"' +
                                '                                           data-toggle="tooltip" data-original-title="删除">删除</a>\n' +
                                '    <a class="btn btn-xs btn-default btn-update" href="#!" title=""\n' +
                                '                                           data-id="' + value.id + '"' +
                                '                                           data-thumb="' + value.thumb + '"' +
                                '                                           data-url="' + value.url + '"' +
                                '                                           data-category="' + value.category + '"' +
                                '                                           data-title="' + value.title + '"' +
                                '                                           data-description="' + value.description + '"' +
                                '                                           data-category_id="' + value.category_id + '"' +
                                '                                           data-toggle="tooltip" data-original-title="编辑">编辑</a>\n' +
                                '</div>\n' +
                                '</td>\n' +
                                '</tr>';

                            $(".tbody").append(tr);
                        })
                    } else {
                        // 数据为空
                        $(".tbody").html("");
                        $(".tbody").append('<tr><td colspan="7" style="text-align: center">暂无数据</td></tr>');
                    }
                },
                function (response) {
                    AjaxError(response);
                }
            );
        }

        // 详情
        $(document).on('click', '.btn-detail', function () {
            const business_title = $(this).attr('data-title');
            const business_thumb = $(this).attr('data-thumb');
            const business_description = $(this).attr('data-description');

            $.alert({
                title: '详情',
                content: '名称简介 ：' + business_title + '<br/>描述：' + business_description,
                type: 'green',
                animation: 'scale',
                draggable: true,
            });
        });

        // 启用/禁用
        $(document).on('click', '.btn-option', function () {
            const id = $(this).attr('data-id');
            const isUsed = $(this).attr('data-is-used');

            var tipMessage = "";
            var wantUsed = 0;
            if (isUsed === "1") { // 1=当前为启用状态，需要改成禁用
                tipMessage = "禁用";
                wantUsed = -1;
            }
            if (isUsed === "-1") { // -1=当前为禁用状态，需要改成启用
                tipMessage = "启用";
                wantUsed = 1;
            }

            const patchData = {
                id: id,
                used: wantUsed,
            };

            $.confirm({
                title: '谨慎操作',
                content: '确认要 <strong style="color: red">' + tipMessage + '</strong> 吗？',
                icon: 'mdi mdi-alert',
                animation: 'scale',
                closeAnimation: 'zoom',
                buttons: {
                    okay: {
                        text: '确认',
                        keys: ['enter'],
                        btnClass: 'btn-orange',
                        action: function () {
                            AjaxForm(
                                "PATCH",
                                "/api/site/used",
                                patchData,
                                function () {
                                },
                                function (data) {
                                    $.alert({
                                        title: '操作成功',
                                        icon: 'mdi mdi-check-decagram',
                                        type: 'green',
                                        content: '编号：' + data.id + ' 已' + tipMessage + '。',
                                        buttons: {
                                            okay: {
                                                text: '关闭',
                                                action: function () {
                                                    location.reload();
                                                }
                                            }
                                        }
                                    });
                                },
                                function (response) {
                                    AjaxError(response);
                                }
                            );
                        }
                    },
                    cancel: {
                        text: '取消',
                        keys: ['ctrl', 'shift'],
                    }
                }
            });
        });

        // 删除
        $(document).on('click', '.btn-confirm', function () {
            const id = $(this).attr('data-id');

            $.confirm({
                title: '谨慎操作',
                content: '确认要 <strong style="color: red">删除</strong> 吗？',
                icon: 'mdi mdi-alert',
                animation: 'scale',
                closeAnimation: 'zoom',
                buttons: {
                    okay: {
                        text: '确认',
                        keys: ['enter'],
                        btnClass: 'btn-orange',
                        action: function () {
                            AjaxForm(
                                "DELETE",
                                '/api/site/' + id,
                                "",
                                function () {
                                },
                                function (data) {
                                    $.alert({
                                        title: '操作成功',
                                        icon: 'mdi mdi-check-decagram',
                                        type: 'green',
                                        content: '编号：' + data.id + ' 已删除。',
                                        buttons: {
                                            okay: {
                                                text: '关闭',
                                                action: function () {
                                                    location.reload();
                                                }
                                            }
                                        }
                                    });
                                },
                                function (response) {
                                    AjaxError(response);
                                }
                            );
                        }
                    },
                    cancel: {
                        text: '取消',
                        keys: ['ctrl', 'shift'],
                    }
                }
            });
        });

        // 编辑
        $(document).on('click', '.btn-update', function () {

            const id = $(this).attr('data-id');
            const thumb = $(this).attr('data-thumb');
            const title = $(this).attr('data-title');
            const url = $(this).attr('data-url');
            const description = $(this).attr('data-description');
            const category_id = $(this).attr('data-category_id');

            $.confirm({
                title: '编辑网站',
                //content: 'url:form.html',  // 也可以采用url形式
                content: '<div class="form-group p-1 mb-0">' +
                    '<div class="input-group mb-3">' +
                    '<div class="input-group-prepend">' +
                    '<span class="input-group-text">分类</span>' +
                    '</div>' +
                    '<select class="form-control select-picker col-lg-5" data-width="auto" data-live-search="true" id="category_id"></select>' +
                    '</div>' +
                    '<div>' +
                    '<input  style="display:none"  autofocus="" class="form-control" type="text"  maxLength="200" id="id" value="' + id + '">' +
                    '</div>' +
                    '<div>' +
                    '<label class="control-label">Logo 链接</label>' +
                    '<input  autofocus="" class="form-control" type="text"  maxLength="200" id="thumb" placeholder="请输入网站 LOGO" value="' + thumb + '">' +
                    '</div>' +
                    '<div>' +
                    '<label class="control-label">上传 Logo 图片</label>' +
                    '<input id="file" name="file" type="file" >' +
                    '<label class="control-label">注: 优先以上传图片为主</label>' +
                    '</div>' +
                    '<div>' +
                    '  <label class="control-label">名称</label>' +
                    '  <input autofocus="" type="text"  placeholder="请输入网站名称" class="form-control"  id="title" value="' + title + '">' +
                    '</div>' +
                    '<div>' +
                    '  <label class="control-label">链接</label>' +
                    '  <input autofocus="" type="text"  placeholder="请输入网站地址" class="form-control"  id="url" value="' + url + '">' +
                    '</div>' +
                    '<div>' +
                    '  <label class="control-label">网站描述</label>' +
                    '  <textarea class="form-control" maxlength="225" rows="2" id="description" placeholder="网站描述"  id="title">' + description + '</textarea>' +
                    '</div>',
                onOpen: function () {
                    AjaxFormNoAsync(
                        "GET",
                        "/api/site/category",
                        "",
                        function () {
                        },
                        function (data) {
                            $("#category_id").append("<option value='-1'>一级目录</option>");
                            $.each(data.list, function (index, value) {
                                if (String(value.id) === category_id) {
                                    $("#category_id").append('<option selected="selected" value="' + value.id + '" >' + value.name + '</option>');

                                } else {
                                    $("#category_id").append("<option value='" + value.id + "' >" + value.name + "</option>");

                                }
                            });
                            // $("#category_id option:eq(0)").attr('selected', 'selected'); //选中第一个
                            $("#category_id").selectpicker('refresh');
                        },
                        function (response) {
                            AjaxError(response);
                        }
                    );
                },
                buttons: {
                    sayMyName: {
                        text: '确认',
                        btnClass: 'btn-orange',

                        action: function () {
                            const file = $("#file").val();
                            const thumb = $("#thumb").val();

                            if (thumb === "" && file === "") {
                                $.alert({
                                    title: '温馨提示',
                                    icon: 'mdi mdi-alert',
                                    type: 'orange',
                                    content: '请输入网站 logo 或者上传 logo 图片',
                                });
                                return false;
                            }

                            const title = $("#title").val();
                            if (title === "") {
                                $.alert({
                                    title: '温馨提示',
                                    icon: 'mdi mdi-alert',
                                    type: 'orange',
                                    content: '请输入网站名称。',
                                });
                                return false;
                            }

                            const url = $("#url").val();
                            if (url === "") {
                                $.alert({
                                    title: '温馨提示',
                                    icon: 'mdi mdi-alert',
                                    type: 'orange',
                                    content: '请输入网站链接。',
                                });
                                return false;
                            }

                            const description = $("#description").val();
                            if (description === "") {
                                $.alert({
                                    title: '温馨提示',
                                    icon: 'mdi mdi-alert',
                                    type: 'orange',
                                    content: '请输入网站描述。',
                                });
                                return false;
                            }

                            var formData = new FormData();
                            formData.append('id', id);
                            formData.append('thumb', thumb);
                            formData.append('title', title);
                            formData.append('url', url);
                            formData.append('description', description);
                            formData.append('file', $("#file")[0].files[0]);
                            formData.append('category_id', $("#category_id").val());

                            AjaxMultipartForm(
                                "PUT",
                                "/api/site",
                                formData,
                                function () {
                                    $(this).hide();
                                    $("#btnLoading").show();
                                },
                                function (data) {
                                    $("#btnLoading").hide();
                                    $("#btnOk").show();

                                    $.alert({
                                        title: '操作成功',
                                        icon: 'mdi mdi-check-decagram',
                                        type: 'green',
                                        content: '编号：' + data.id + ' 修改完成。',
                                        buttons: {
                                            okay: {
                                                text: '关闭',
                                                action: function () {
                                                    location.href = "/admin/site";
                                                }
                                            }
                                        }
                                    });
                                },
                                function (response) {
                                    $("#btnLoading").hide();
                                    $("#btnOk").show();

                                    AjaxError(response);
                                }
                            );

                        }
                    },
                    '取消': function () {
                    }
                }
            });

        });

        // 搜索
        $(document).on('click', '.btn-search', function () {
            getPageListData(0, 0, $("#search-keyword").val())
        })
    })
</script>

</body>
</html>
